<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Averia+Libre:wght@300&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
    <title>Document</title>
</head>
<body>
    <header class="header">
        <div class="header__menu m0-a">
            <div class="header__flex-container">
                <div class="header__menu-logo">
                    <img src="img/Logo.png" alt="">
                </div>
                <div class="header__menu-nav">
                    <div class="header__menu-nav-flex">
                        <a href="#Why Alivio" class="href"><h4 class="header__menu-h4 header__menu-nav-flex-element text__capitalize">Why alivio</h4></a>
                        <a href="#Solutions" class="href"><h4 class="header__menu-h4 header__menu-nav-flex-element">Solutions</h4></a>
                        <a href="#Community" class="href"><h4 class="header__menu-h4 header__menu-nav-flex-element">Community</h4></a>
                        <a href="#Pricing" class="href"><h4 class="header__menu-h4 header__menu-nav-flex-element">Pricing</h4></a>
                    </div>
                </div>
                <div class="header__menu-btns">
                    <div class="header__menu-btns-flex">
                        <div class="header__menu-btn-wrapper"><button class="header__menu-btn">Sign in</button></div>
                        <div class="header__menu-btn-wrapper-green"><button class="header__menu-btn header__menu-green-btn text__capitalize">Start trial</button></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="header__container"  id="Why Alivio">
            <div class="header__wrapper">
                <h1 class="header__h1 text-green">Be aware,<br>Manage well</h1>
                <p class="header__p">Everyone experiences stress in different ways.
                Let Alivio guide you, in a personalized journal experience, to 
                overcome your stress.</p>
                <div class="header__menu-btn-wrapper"><button class="header__menu-btn header__menu-green-btn header__menu-btn-bottom text__capitalize">Find your way</button></div>
            </div>
        </div>
    </header>

    <section class="how-it-works" id="Solutions">
        <div class="how-it-works__container m0-a">
            <h5 class="how-it-works__h5">How it works</h5>
            <div class="how-it-works__text">
                <h2 class="how-it-works__h2">Understand & Release 
                the stress in 3 steps</h2>
                <p class="how-it-works__p">Alivio offers as many journals it takes, 
                tackling different areas such as anxiety, overwhelmedness, sadness, 
                or anger, and a variety of personal causes, to help you become aware 
                of your emotions, and guide you in how to manage stress.</p>
            </div>
            <div class="how-it-works__flex-cards">
                <div class="how-it-works__flex-card how-it-works__flex-card1">
                    <h1 class="how-it-works__card-count how-it-works__card-count1">01
                        <h4 class="how-it-works__card-h4 how-it-works__card-h4-1">Personalize</h4>
                    </h1>
                    <p class="how-it-works__p how-it-works__card-p1">Answer a quick survey about how you express 
                    yourself, what causes you stress, and what area would you like to work on. 
                    This way, we can fully personalize your journal!</p>
                    <img src="img/how-it-works__card-img1.png" alt="" class="how-it-works__card-img how-it-works__card-img1">
                </div>
                <div class="how-it-works__flex-card how-it-works__flex-card2">
                    <h1 class="how-it-works__card-count how-it-works__card-count2">02
                        <h4 class="how-it-works__card-h4 how-it-works__card-h4-2 text__capitalize">Write & understand</h4>
                    </h1>
                    <p class="how-it-works__p how-it-works__card-p2">Write, draw, reflect, understand. Alivio 
                    will guide you through the prompts and will help you manage your stress!</p>
                    <img src="img/how-it-works__card-img2.png" alt="" class="how-it-works__card-img how-it-works__card-img2">
                </div>
                <div class="how-it-works__flex-card how-it-works__flex-card3">
                    <h1 class="how-it-works__card-count how-it-works__card-count3">03
                        <h4 class="how-it-works__card-h4 how-it-works__card-h4-3 text__capitalize">Alivio</h4>
                    </h1>
                    <p class="how-it-works__p how-it-works__card-p3">Now you are aware, and have a way to manage 
                    and overcome your own stress. What are you waiting for? Alivio today!</p>
                    <img src="img/how-it-works__card-img3.png" alt="" class="how-it-works__card-img how-it-works__card-img3">
                </div>
            </div>
        </div>
    </section>
    
    <section class="about" id="Community">
        <div class="about__container">
            <div class="about__text-container">
                <h2 class="about__h2">Let's hear about Kayla's success story</h2>
                <p class="about__p">See how well Alivio works in a real customer’s life.</p>
                <div class="header__menu-btn-wrapper about__btn-wrapper"><button class="header__menu-btn about__btn header__menu-green-btn header__menu-btn-bottom">Lets's get started</button></div>
            </div>
            <a href="https://www.youtube.com/">
                <div class="about__video"></div>
            </a>
        </div>
    </section>

    <section class="our-clients" id="Pricing">
        <div class="our-clients__container">
            <img src="img/our-clients__Image.png" alt="" class="our-clients__img">
            <div class="our-clients__text-container">
                <h5 class="how-it-works__h5 our-client__h5">Our product</h5>
                <h2 class="how-it-works__h2 our-client__h2">You tell us your stress, We make your diary</h2>
                <p class="our-clients__p">Everyone experiences it, and in different ways.
                    <br> Let Alivio guide you, in a personalized journal experience, to overcome your stress.</p>
                <div class="header__menu-btn-wrapper our-clients__btn-wrapper"><button class="header__menu-btn our-client__btn header__menu-green-btn header__menu-btn-bottom">Find your way</button></div>
                <div class="our-client__card-container">
                    <h5 class="our-clients__card-h5 text__capitalize">Customized for</h5>
                    <div class="our-clients__line"></div>
                    <img src="img/our-clients__card-Image.png" alt="" class="our-client__card-img">
                    <p class="our-clients__card-p">Mikayla</p>
                    <h4 class="our-clients__card-h4">Your custom contents</h4>
                    <ul class="our-client__card-ul">
                        <li class="our-client__card-li text__capitalize">Understand your stress</li>
                        <li class="our-client__card-li text__capitalize">Anger managment</li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    <footer class="footer">
        <div class="footer__container">
            <h3 class="footer__h3">Alivio</h3>
            <a href="#Why Alivio" class="href"><h4 class="footer__h4">Why Alivio</h4></a>
            <a href="#Solutions" class="href"><h4 class="footer__h4">Solutions</h4></a>
            <a href="#Community" class="href"><h4 class="footer__h4">Community</h4></a>
            <a href="#Pricing" class="href"><h4 class="footer__h4">Pricing</h4></a>
        </div>
    </footer>

</body>
</html>
